<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>楚瑞涛的博客-首页</title>
        <meta name="keywords" content="个人博客,楚瑞涛"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href= <?php echo HOME_CSS.'base.css' ?> rel="stylesheet">
        <link href= <?php echo HOME_CSS.'index.css' ?> rel="stylesheet">
        <link href= <?php echo HOME_CSS.'m.css' ?> rel="stylesheet">
        <script src= <?php echo HOME_JS.'jquery.min.js' ?> type="text/javascript"></script>
        <script src=<?php echo HOME_JS.'comm.js'?> type="text/javascript" ></script>
    </head>
    <body>
        <header class="header-navigation" id="header">
            <nav>
                <div class="logo">
                    <a href=<?php echo HOME_PATH.'index.php' ?> >楚瑞涛博客</a>
                </div>
                <h2 id="mnavh">
                    <span class="navicon"></span>
                </h2>
                <ul id="starlist">
                    <li>
                        <a class="selected" href=<?php echo HOME_PATH.'index.php' ?>>网站首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">我的相册</a>
                    </li>
                    <li>
                        <a href="javascript:;">我的日记</a>
                    </li>
                    <li>
                        <a href="javascript:;">关于我</a>
                    </li>
                    <li>
                        <a href="javascript:;">留言</a>
                    </li>
                    <li>
                        <a href="javascript:;">以上内容待补充</a>
                    </li>
                </ul>
            </nav>
        </header>
        <article>
            <aside class="l_box" id="index_aside">
                <div class="about_me">
                    <h2>关于我</h2>
                    <ul>
                        <i>
                            <img src = <?php echo HOME_IMG.'blog_tx/4.jpg' ?> />
                        </i>
                        <p>
                            <b>楚瑞涛</b>
                            ，一个90后小青年，现于河南科技学院学校学习，初来乍到，请多多关照。
                        </p>
                    </ul>
                </div>
                <div class="wdxc">
                    <h2>我的相册</h2>
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src= <?php echo HOME_IMG.'blog_tx/7.jpg' ?> />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src= <?php echo HOME_IMG.'blog_tx/8.jpg' ?> />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src= <?php echo HOME_IMG.'blog_tx/9.jpg' ?> />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src= <?php echo HOME_IMG.'blog_tx/10.jpg' ?> />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src= <?php echo HOME_IMG.'blog_tx/11.jpg' ?> />
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src= <?php echo HOME_IMG.'blog_tx/12.jpg' ?> />
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="search">
                    <input id="keyboard" class="input_text"  placeholder="请输入关键字词" style="color: rgb(153, 153, 153);" type="text">
                    <input id="search" name="Submit" class="input_submit" value="搜索" type="submit">
                </div>
                <div class="fenlei">
                    <h2>文章分类</h2>
                    <ul id="types"></ul>
                </div>
                <div class="tuijian">
                    <h2>站长推荐</h2>
                    <ul id="recommend"></ul>
                </div>
                <div class="cloud">
                    <h2>热门标签云</h2>
                    <ul id="targets"></ul>
                </div>
                <!-- <div class="links">
                    <h2>友情链接</h2>
                    <ul>

                    </ul>
                </div> -->
                <div class="guanzhu">
                    <h2>关注我的杂货铺</h2>
                    <ul>
                        <img src=<?php echo HOME_IMG.'wx.jpg' ?> />
                    </ul>
                </div>
            </aside>
            <main class="r_box" id="blogs">
                <?php
                    foreach($blogs as $blog){
                ?>  
                    <li>
                        <i>
                            <a href= <?php echo HOME_PATH.'index.php/Blog/getBlog/id/'.$blog['id'] ?> >
                                <img src = <?php echo $blog['blog_img'] ?> />
                            </a>
                        </i>
                        <h3>
                            <a href="<?php echo HOME_PATH.'index.php/Blog/getBlog/id/'.$blog['id'] ?>">
                            <?php echo $blog['title'] ?> <br></a>
                        </h3>
                        <p><?php echo $blog['outline'] ?> <br></p>
                    </li>
                <?php
                    }
                ?>
            </main>
        </article>
        <footer>
            <p>
                Design by <a href="javascript:;" target="_blank">楚瑞涛</a>
                <a href="javascript:;">河南科技学院</a>
            </p>
        </footer>
        <a href="#" class="cd-top">Top</a>
    </body>
    <script>
        //加载
        var lock_type = true;
        function load_type_blog(obj,typeId){                //按照分类查找博客
            var type_name = $(obj).html().split('（')[0];
            if(typeId){
                lock_type = false;      //锁上
                $.ajax({
                    async : true,
                    type:"POST",
                    url:'/blog_system/home/index.php/Blog/queryTypeBlog/id/'+typeId,
                    success: function (result){
                        var data = JSON.parse(result);
                        console.log(data);
                        var blogs = $("#blogs");
                        blogs.empty();        //删除节点所有元素
                        if(data.length>0){
                            $("#blogs").append('<li><h4 style="text-align: center;color: #f00;" >文章类别：'+type_name+'</h4></li>');
                            for(i in data){
                                $("#blogs").append('<li><i><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'" >'+
                                    '<img src = "'+data[i].blog_img+'" /></a></i><h3><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'">'+
                                    data[i].title+' <br></a></h3><p>'+data[i].outline+' <br></p></li>');
                            }
                            $("#blogs").append('<h4 style="text-align: center;color: #a5a5a5;" >-----已经到结尾了-----</h4>');
                        }else{
                            $("#blogs").append('<li><h4 style="text-align: center;color: #f00;" >-----类别搜索失败，刷新一下试试-----</h4></li>');
                        }
                        $(document).scrollTop(0);
                    }
                })
            }
        }
       $(document).ready(function(){
            //请求推荐数据
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Blog/queryJson?type=2',
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        $("#recommend").append('<li><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'" title="'+data[i].title+'">'+data[i].title+'</a></li>');
                    }
                }
            })
            //请求类别数据
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Blog/queryJson?type=3',
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        $("#types").append('<li><a onclick="load_type_blog(this,'+data[i].id+')" href="javascript:;">'+data[i].name+'（'+data[i].count+'）</a></li>');
                    }
                }
            })  
            var lock_search = true;        //锁，判断是否在查询界面 ture 不再，false 在
            //点击搜索按钮
            $("#search").click(function(){
               var key = $("#keyboard").val().trim();
               if(key != ""){
                    lock_search=false;     //锁上
                    $.ajax({
                        async : true,
                        type:"POST",
                        url:'/blog_system/home/index.php/Blog/queryBlog/key/'+key,
                        success: function (result){
                            var data = JSON.parse(result);
                            var blogs = $("#blogs");
                            blogs.empty();        //删除节点所有元素
                            if(data.length>0){
                                for(i in data){
                                    $("#blogs").append('<li><i><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'" >'+
                                        '<img src = "'+data[i].blog_img+'" /></a></i><h3><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'">'+
                                        data[i].title+' <br></a></h3><p>'+data[i].outline+' <br></p></li>');
                                }
                                $("#blogs").append('<h4 style="text-align: center;color: #a5a5a5;" >-----已经到结尾了-----</h4>');
                            }else{
                                $("#blogs").append('<li><h4 style="text-align: center;color: #f00;" >-----没有搜索到，换个关键字试试-----</h4></li>');
                                console.log("没有搜索到");
                            }
                        }
                    })
               }else{
                    alert("请输出关键字");
               }
            });
            //懒加载页面
            var current = 0;        //当前页数      //存在发送两次请求问题
            var list_state = true;
            $(window).scroll(function(){ // 滚动条距离顶部的距离 大于 200px时 
                if (list_state && lock_search && lock_type) {
                    if(list_state && $(document).scrollTop() >= $(document).height() - $(window).height()){
                        var top = $(document).scrollTop();
                        current+=1;
                        $.ajax({
                            async:true,     //异步请求
                            type:'POST',
                            url:'/blog_system/home/index.php/Blog/getBlogPage/page/'+current,
                            success:function(result){
                                var data = JSON.parse(result);
                                if(data.length != 0){
                                    var len = data.length;
                                    for(var i=0;i<len;i++){
                                        $("#blogs").append('<li><i><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'" >'+
                                        '<img src = '+data[i].blog_img+' /></a></i><h3><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'">'+data[i].title+' <br></a></h3><p>'+data[i].outline+' <br></p></li>');
                                    }
                                    $(document).scrollTop(top);
                                }else{
                                    list_state = false;
                                    $("#blogs").append('<h4 style="text-align: center;color: #a5a5a5;" >-----已经到结尾了-----</h4>');
                                }
                            }
                        });
                    }
                }
            });
            //请求热门标签
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Target/queryTargetJson',
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        $("#targets").append('<a href="javascript:;"'+data[i].id+')">'+data[i].target+'</a>');
                    }
                }
            })
       })
    </script>
</html>
